<#assign base=request.contextPath />
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="${base}/layui/css/layui.css" media="all">
    <style type="text/css">
        .childrenBody{ padding:10px;}
    </style>
</head>
<body class="childrenBody">
<blockquote class="layui-elem-quote layui-text">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 120px;">本机生成代码目录</label>
            <div class="layui-input-inline">
                <input type="text" name="localPath" id="localPath" class="layui-input" value="${localPath}">
            </div>
        </div>
</blockquote>
<table id="demo" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="add_property">添加属性</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn  layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="gen_code">生成代码</a>
</script>
<script src="${base}/layui/layui.js"></script>
<script>
    layui.use(['form', 'layer', 'table', 'laytpl', 'laydate', 'upload'], function(){
        var table = layui.table,
                layer = parent.layer === undefined ? layui.layer : top.layer,
                $ = layui.jquery;

        //第一个实例
        table.render({
            elem: '#demo'
            ,toolbar: '#toolbarDemo'
            ,height: 'full-200'
            ,url: '/gen/getList' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'entityName', title: '实体类名字', width:200}
                ,{field: 'notes', title: '注释', width:350}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:270}

            ]]
        });


        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.prompt({
                    formType: 2
                    ,value: data.email
                }, function(value, index){
                    obj.update({
                        email: value
                    });
                    layer.close(index);
                });
            }else if(obj.event === 'gen_code'){
//                alert(JSON.stringify(data))
                var index = layer.load(1, { shade: [0.5,'#fff'] });
                $.post("/gen/genCode", {"genId":data.id,"localPath":$("#localPath").val()},
                        function(data){
                            layer.close(index);
                        }, "json");

            }else if(obj.event == 'add_property'){
                layer.open({
                    title : "配置文件属性:",
                    type: 2,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['95%', '90%'], //宽高
                    content : "/genProperty?id="+obj.data.id,
                    success : function(layero, index){
                        setTimeout(function(){
                            layui.layer.tips('点击此处返回配置文件列表', '.layui-layer-setwin .layui-layer-close', {
                                tips: 3
                            });
                        },500)
                    }
                });
            }
        });

    });
</script>
</body>
</html>